<!DOCTYPE html>
<html>
  <head>
    <script src="../node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
    <script src="../node_modules/web-component-tester/browser.js"></script>

    <script
      type="module"
      src="../src/state-summary/state-card-display.js"
    ></script>
  </head>
  <body>
    <test-fixture id="stateCardDisplay">
      <template>
        <div />
      </template>
    </test-fixture>

    <script type="module">
      import "../src/state-summary/state-card-display.js";
      function lightOrShadow(elem, selector) {
        return elem.shadowRoot
          ? elem.shadowRoot.querySelector(selector)
          : elem.querySelector(selector);
      }

      suite("state-card-display", function () {
        let wrapper;
        let card;

        setup(function () {
          wrapper = fixture("stateCardDisplay");
          card = document.createElement("state-card-display");
          card.stateObj = {
            entity_id: "binary_sensor.demo",
            state: "off",
            attributes: {
              device_class: "moisture",
            },
          };
          card.hass = {
            language: "en",
            resources: {
              en: {
                "state.binary_sensor.moisture.off": "Mock Off Text",
              },
            },
          };
          wrapper.appendChild(card);
        });

        test("state display text", function (done) {
          flush(function () {
            const stateDiv = lightOrShadow(card, ".state");
            assert.isOk(stateDiv);
            assert.deepEqual(stateDiv.innerText, "Mock Off Text");
            done();
          });
        });
      });
    </script>
  </body>
</html>
